<template>
  <view class="m-input-view">
    <!-- BUG1：ios下 :type不支持动态值，使用if else替换-->
    <!--
		<input v-if="inputType == 'password' && !this.showPassword"  type="password"  :focus="focus_"  v-model="inputValue" class="m-input-input" :placeholder="placeholder"
			 password   @focus="onFocus" @blur="onBlur" @input="onInput"/>
		<input v-else :focus="focus_"  type="text"  v-model="inputValue" class="m-input-input " :placeholder="placeholder"
				@focus="onFocus" @blur="onBlur" @input="onInput"/>
        -->
    <input
      :focus="focus_"
      :type="inputType"
      :value="inputValue"
      @input="onInput"
      class="m-input-input"
      :placeholder="placeholder"
      :password="type === 'password' && !showPassword"
      @focus="onFocus"
      @blur="onBlur"
    />
    <!-- 优先显示密码可见按钮 -->
    <view v-if="clearable_ && inputValue.length" class="m-input-icon"><m-icon color="#cccccc" type="clear" size="20" @click="clear"></m-icon></view>
    <view v-if="displayable_" class="m-input-icon m-input-display"><m-icon :color="showPassword ? '#999999' : '#cccccc'" type="eye" size="20" @click="display"></m-icon></view>
  </view>
</template>

<script>
import mIcon from '@/components/m-icon/m-icon.vue';

export default {
  components: {
    mIcon
  },
  props: {
    type: String,
    placeholder: String,
    clearable: {
      type: [Boolean, String],
      default: false
    },
    displayable: {
      type: [Boolean, String],
      default: false
    },
    focus: {
      type: [Boolean, String],
      default: false
    },
    minput: {
      default: ''
    }
  },
  data() {
    return {
      showPassword: false,
      isFocus: false,
      inputValue: this.minput
    };
  },
  computed: {
    inputType() {
      const type = this.type;
      return type === 'password' ? 'text' : type;
    },
    clearable_() {
      return String(this.clearable) !== 'false';
    },
    displayable_() {
      return String(this.displayable) !== 'false';
    },
    focus_() {
      return String(this.focus) !== 'false';
    }
  },
  methods: {
    clear() {
      this.inputValue = '';
      this.$emit('update:minput', '');
    },
    display() {
      this.showPassword = !this.showPassword;
    },
    onFocus() {
      this.isFocus = true;
    },
    onBlur() {
      this.$nextTick(() => {
        this.isFocus = false;
      });
    },
    onInput(e) {
      this.inputValue = e.target.value;
      this.$emit('update:minput', this.inputValue);
    }
  }
};
</script>

<style>
.m-input-view {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  flex: 1;
  padding: 0 10rpx;
}

.m-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
}

.m-input-input {
  flex: 1;
  width: 100%;
}

.m-input-display {
  margin-left: 5px;
}
</style>
